<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-08-16 16:36:50
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-08-01 09:27:32
 * @FilePath: \BLOG\src\components\Footer\index.vue
-->
<template>
  <div class="footer-container-wrap">
    <div class="content-wrap" :class="{ 'm-content-wrap': isMobi }">
      <div class="display-wrap saying-wrap pointer kbn-custom" :data-tip="'点击即可刷新😊'" @click="handleRefreshSaying">「 {{ state.saying }} 」</div>
      <div class="sheming display-wrap" style="text-wrap: nowrap">本站内容仅用于学习交流，如有侵权！请联系站长删除。敬请谅解！</div>
      <div class="copy-right display-wrap" style="margin-right: 14px">Copyright ©2024 - {{ new Date().getFullYear() }} By 冬七（snows_l）版权所有</div>
      <div style="margin: 5px 0; color: #fff; display: flex; justify-content: center; align-items: center" v-if="!isMobi">
        <span class="pointer beianhao-value hover-shadow" @click="handleICPBeian">
          <span class="pre">{{ state.domainBeianPre }}</span>
          <span class="num" :style="{ 'background-color': state.domainBeianBg }">{{ state.domainBeianNum }}</span>
        </span>
        <span class="web-beian-wrap pointer" style="margin-left: 20px" @click="handleWebBeian">
          <span class="beianhao-value hover-shadow">
            <span class="pre">
              <img style="margin: -5px 0px 0 0px; width: 14px; height: 14px; vertical-align: middle" src="@/assets/images/icon/gongan.png" alt="" />
              {{ state.webBeianPre }}
            </span>
            <span class="num" :style="{ 'background-color': state.webBeianBg }">{{ state.webBeianNum }}</span>
          </span>
        </span>
      </div>
      <div v-else class="m-baian">
        <div class="display-wrap" style="margin-top: 10px" @click="handleICPBeian">
          <span class="pointer beianhao-value hover-shadow">
            <span class="pre">{{ state.domainBeianPre }}</span>
            <span class="num" :style="{ 'background-color': state.domainBeianBg }">{{ state.domainBeianNum }}</span>
          </span>
        </div>
        <div class="display-wrap" style="margin-top: 10px" @click="handleWebBeian">
          <span class="pointer beianhao-value hover-shadow">
            <span class="pre">
              <img style="margin: -5px 0px 0px 0; width: 14px; height: 14px; vertical-align: middle" src="@/assets/images/icon/gongan.png" alt="" />
              {{ state.webBeianPre }}
            </span>
            <span class="num" :style="{ 'background-color': state.webBeianBg }">{{ state.webBeianNum }}</span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useResize from '@/hooks/useResize';
import { useAppStore } from '@/store/app';
import { getRandomColor } from '@/utils/theme';
import axios from 'axios';
import { reactive } from 'vue';
const { isMobi } = useResize();
const appStore = useAppStore();
const state = reactive({
  saying: isMobi.value ? '渔得鱼心满意足，樵得樵眼笑眉舒！' : '渔得鱼心满意足，樵得樵眼笑眉舒！',
  domainBeian: appStore.projectConfig.domainBeian,
  domainBeianPre: appStore.projectConfig.domainBeian.substring(0, 5),
  domainBeianNum: appStore.projectConfig.domainBeian.substring(5),
  webBeian: appStore.projectConfig.webBeian,
  webBeianPre: appStore.projectConfig.webBeian.substring(0, 5),
  webBeianNum: appStore.projectConfig.webBeian.substring(5),
  webBeianBg: getRandomColor(),
  domainBeianBg: getRandomColor()
});

// 获取名言名句
const getSaying = () => {
  axios.get('https://api.xygeng.cn/one', {}).then(response => {
    let res = response.data;
    if (res.code == 200) {
      if (isMobi.value) {
        state.saying = res.data.content.length > 20 ? res.data.content.slice(0, 20) + '...' : res.data.content;
      } else {
        state.saying = res.data.content.length > 40 ? res.data.content.slice(0, 40) + '...' : res.data.content;
      }
    }
  });
};
// 刷新名言名句
const handleRefreshSaying = () => {
  getSaying();
};

// ICP备案号
const handleICPBeian = () => {
  window.open('https://beian.miit.gov.cn/', '_blank');
};

// 网站备案号
const handleWebBeian = () => {
  window.open('https://beian.mps.gov.cn/#/query/webSearch?code=53062902530665', '_blank');
};
</script>

<style lang="scss" scoped>
.footer-container-wrap {
  width: 100vw;
  padding: 15px;
  box-shadow: 0 1px 20px 10px rgba(255, 255, 255, 0.394);
  background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: animation 10s ease infinite;
  .content-wrap {
    height: 100%;
    margin: 0 auto;
    width: var(--content-max-width);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .display-wrap {
      display: flex;
      justify-content: center;
      font-size: 14px;
      color: #fff;
      margin: 5px 0;
      text-align: center;
    }
    .beianhao-value {
      display: flex;
      align-items: center;
      border-radius: var(--border-radius-1);
      overflow: hidden;
      height: 22px;
      .pre {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 4px 4px 4px 10px;
        display: inline-block;
        background-color: #5d5d5d;
        border-right: 1px solid var(--border-color);
      }
      .num {
        height: 100%;
        padding: 4px 10px 4px 4px;
        display: inline-block;
      }
    }
    .m-baian {
      .pre {
        line-height: 15px;
      }
      .num {
        line-height: 16px;
      }
    }
    .saying-wrap {
      padding: 0 10px;
      border-radius: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .saying-wrap:hover {
    text-shadow: 1px 1px 1px #000;
  }
  .m-content-wrap {
    width: var(--content-max-width-m);
    .saying-wrap {
      border-radius: 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@keyframes animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>

<style lang="scss">
.dark {
  .footer-container-wrap {
    box-shadow: none;
  }
}
</style>
